window.onload = function() {


    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block'
        big.style.display = 'block'
    })
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    preview_img.addEventListener('mousemove', function(e) {
        var x = e.pageX - this.offsetLeft
        var y = e.pageY - this.offsetTop
        var maskX = x - mask.offsetWidth / 2
        var maskY = y - mask.offsetHeight / 2
        var maskMaxX = preview_img.offsetWidth - mask.offsetWidth
        var maskMaxY = preview_img.offsetHeight - mask.offsetHeight
        if (maskX < 0) {
            maskX = 0
        } else if (maskX > maskMaxX) {
            maskX = maskMaxX
        }
        if (maskY < 0) {
            maskY = 0
        } else if (maskY > maskMaxY) {
            maskY = maskMaxY
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        var bigIMg = document.querySelector('.bigImg');
        var bigMax = big.offsetWidth - bigIMg.offsetWidth;
        var bigX = (maskX * bigMax) / maskMaxX;
        var bigY = (maskY * bigMax) / maskMaxY;
        bigIMg.style.left = bigX + 'px';
        bigIMg.style.top = bigY + 'px';

    })


}